import React, { Component } from 'react';
import { NavBar, Form, Button, Input, Cascader, List, Switch, Toast } from 'antd-mobile'
import '../styles/Address.scss'
import * as service from '../api/index'

class Gai_address extends Component {
    constructor(props) {
        super(props)
        this.state = {
            options: [
                {
                    label: '浙江省',
                    value: '浙江省',
                    children: [
                        {
                            label: '杭州市',
                            value: '杭州市',
                            children: [
                                {
                                    label: '西湖区',
                                    value: '西湖区',
                                },
                                {
                                    label: '上城区',
                                    value: '上城区',
                                },
                                {
                                    label: '余杭区',
                                    value: '余杭区',
                                },
                            ],
                        },
                        {
                            label: '温州市',
                            value: '温州市',
                            children: [
                                {
                                    label: '鹿城区',
                                    value: '鹿城区',
                                },
                                {
                                    label: '龙湾区',
                                    value: '龙湾区',
                                },
                                {
                                    label: '瓯海区',
                                    value: '瓯海区',
                                },
                            ],
                        }
                    ]
                }
            ],
            visible: false,
            city: [],
            isDefault: null
        }
    }

    async setaddress(values) {
        // 解构values
        var { name, tel, addressDetail } = values
        // 获取addressid
        console.log(this.props.location.state.addressid);
        // 更改地址
        var res = await service.address_update({ addressid: this.props.location.state.addressid, userid: localStorage.getItem('userid'), name: name, tel: tel, province: this.state.city[0], city: this.state.city[1], county: this.state.city[2], addressDetail: addressDetail, isDefault: this.state.isDefault })
        if (res.data.code == 200) {
            Toast.show({
                icon: 'success',
                content: '修改成功',
            })
            this.props.history.push('/address')
        }
    }
    render() {
        var { addressDetail, name, province,tel } = this.props.location.state
        return (
            <div className='setaddress'>
                <NavBar onBack={() => { this.props.history.go(-1) }}>地址详情</NavBar>
                <div className="main">
                    <Form requiredMarkStyle='none' layout='horizontal' mode='card'
                        onFinish={(values) => {
                            this.setaddress(values)
                        }}
                        footer={
                            <Button block type='submit' color='danger' size='large' shape='rounded'>
                                确认修改
                            </Button>
                        }>
                        <Form.Item
                            name='name'
                            label='姓名'
                        >
                            <Input defaultValue={name} placeholder='姓名' />
                        </Form.Item>
                        <Form.Item
                            name='tel'
                            label='电话'
                        >
                            <Input defaultValue={tel} placeholder='电话' />
                        </Form.Item>
                        <Form.Item
                            name='adress'
                            label='地区'
                            onClick={() => { this.setState({ visible: true }) }}
                        >
                            <Cascader
                                options={this.state.options}
                                visible={this.state.visible}
                                onClose={() => {
                                    this.setState({ visible: false })
                                }}
                                onSelect={(val, extend) => {
                                    console.log('onSelect', val, extend.items)
                                    this.setState({ city: val })
                                }}
                            >
                                {items => {
                                    if (items.every(item => item === null)) {
                                        return province
                                    } else {
                                        return items.map(item => item?.label ?? '未选择').join('/')
                                    }
                                }}
                            </Cascader>
                        </Form.Item>
                        <Form.Item
                            name='addressDetail'
                            label='详细地址'
                        >
                            <Input defaultValue={addressDetail} placeholder='详细地址' />
                        </Form.Item>
                        <List>
                            <List.Item extra={<Switch onChange={(val) => {
                                this.setState({ isDefault: val })
                            }} />}>设置为默认收货地址</List.Item>
                        </List>
                    </Form>
                </div>
            </div>
        );
    }
}

export default Gai_address;